<template>
  <el-button 
    type="primary" 
    size="large" 
    style="margin-left:5px"
    @click="showSelect()"
  >
    选择列表
  </el-button>
  <el-button 
    type="primary" 
    size="large" 
    style="margin-left:10px"
  >
    撰写窗口
  </el-button>
  <el-button 
    type="primary" 
    size="large" 
    style="margin-left:10px"
  >
    快速命令
  </el-button>


  <!-- 导航页 -->
  <el-tabs
    v-model="logIndex"
    class="demo-tabs"
    @tab-click="handleClick"
    style="margin-top: 10px; border-radius: 10px;"
  >
    <el-tab-pane label="Terminal" :name="0">
      <!-- 终端 -->
      <div style="margin-top: 20px;;border-radius: 10px; overflow: hidden; height: 590px; background-color: rgb(29, 29, 36); padding: 10px;">
        <terminal 
          name="terminal" 
          style="height: 590px;"
          title="Terminal"
          :init-log="null"
          :context="'$ '+ $store.getters.currentUser.userName + '/' + hostName"
          @execCmd="onExecCmd"
          :show-header="false"
        >
        </terminal>
      </div>
    </el-tab-pane>
    <el-tab-pane label="Log" :name="1">
      <!-- 日志显示区域 -->
      <CodeBoard v-model="this.$store.state.log.string"></CodeBoard>
      
    </el-tab-pane>
  </el-tabs>


  
  


  <!-- 选择列表弹窗 -->
  <el-dialog 
    v-model="isSelectShow" 
    title="选择列表" 
    style="width: 800px; border-radius: 15px;"
  >
    <RouterLink to="/user/sessionManage">跳转至会话管理界面</RouterLink>
    <!-- 表单 -->
    <div class="table" style="margin-top: 10px;" v-if="isSelectShow">
      <el-table
        :data="sessions"
        border
        style="width: 100%; z-index: 0; max-height: 500px; overflow: auto;"
        class="shadow roundy-20"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        size="large"
        stripe
      >
        <el-table-column label="名称" align="center">
          <template #default="{ row }">
            <span class="pointer" style="color: brown;" @click="linkSession(row)">{{
              row.hostName
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="主机" align="center">
          <template #default="{ row }">
            <span>{{ row.host }}</span>
          </template>
        </el-table-column>

        <el-table-column label="端口" align="center"> 
          <template #default="{ row }">
            <span>{{ row.port }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户名" align="center">
          <template #default="{ row }">
            <span>{{ row.username }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>

</template>

<script>
import request from '@/utils/request';
import CodeBoard from '../Others/CodeBoard.vue';

export default {
  name: "LogCheck",
  components:{
    CodeBoard,
  },
  data(){
    return{
      showLog: '',
      isSelectShow: false,
      select:{},
      logIndex: 0,
      sessions:[],
      hostName:'',
    }
  },
  beforUpdated(){
    this.hostName = this.$store.state.destHostParam?.hostName == undefined ? '未连接' : this.$store.state.destHostParam?.hostName
  },
  computed:{
    destHostParam(){
      return this.$store.state.destHostParam
    }
  },
  methods:{
    /* 显示选择窗口 */
    showSelect(){
      this.isSelectShow = true
      this.searchSession()
    },
    onExecCmd(cmdKey, command, success, failed){

      if(cmdKey == 'deleteSelf'){
        this.$store.dispatch('deleteUser', {vm: this, userList:[this.$store.getters.currentUser.userId]})
      }else{
        if(!this.destHostParam.hostName){
          failed('您还没有连接会话!')
          return
        }


        request.get("/newapi/host/run", {params:{
          cmd: command,
          host: this.destHostParam.host,
          hostName: this.destHostParam.hostName,
          link: this.destHostParam.link,
          password: this.destHostParam.password,
          port: this.destHostParam.port,
          username: this.destHostParam.username
        }}).then((res) => {
          if (res.code === 200) {
            if(res.data.length == 0){
              success({
                type: 'normal',
                class: 'success',
                content: '成功执行',
              })
              return
            }

            let output = ''
            res.data.forEach(d => {
              output += d + '\n'
            });
            console.log(output);
            success({
              type: 'code',
              class: 'info',
              content: output,
            })
          } else {
            failed(res.msg)
          }
        },
        error => {
          failed(error.message)
        });
      }
    },
    /* 查询会话 */
    searchSession(){
      request.get("newapi/host/list",{
        params: {
          pageNum: 1,
          pageSize: 9999
        }
      }).then(
        res => { 
          if(res.code == 200){
              this.sessions = res.data.records
          }else{
            this.$message({
              message: res.msg,
              type: 'error'
            }) 
          }
        },
        error => { 
          this.$message({
            message: error.message,
            type: 'error'
          }) 
        },
      )
    },
    /* 连接会话 */
    linkSession(el){
      this.$store.dispatch('linkHost', {hostInfo: el, vm: this})
    }
  }
  
}
</script>

<style scoped lang="less">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.pointer:hover {
  font-weight: bold;
  text-decoration: underline;
}
</style>
